﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>积分商城分类</title>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="css/font-awesome.min.css" rel="stylesheet"/>
 <link href="css/page.min.css" rel="stylesheet" />
    
</head>
<body>
	<section>
		<section class="mui-col-xs-3 fl" >
			<ul class="dfs_s">
				<li data-id="ddf_oiu_a">送父母</li>
				<li class="act_as" data-id="ddf_oiu_b">送伴侣</li>
				<li data-id="ddf_oiu_c">送子女</li>
				<li data-id="ddf_oiu_d">送朋友</li>
				<li data-id="ddf_oiu_e">居家办公</li>
				<li data-id="ddf_oiu_f">魔幻水晶</li>
				<li data-id="ddf_oiu_g">时尚饰品</li>
				<li data-id="ddf_oiu_h">创意杯子</li>
				
			</ul>
		</section>   
		
		<section class="mui-col-xs-9 bgff fl pd pt20 pl20 cen sdf_ouyy show_ssd" id="ddf_oiu_b">
			<section class="mui-col-xs-4 fl">
				<img src="img/case_a.jpg"  class="w100"/>
				<p  class="fz14 ">饰品</p>
				
			</section>
			<section class="mui-col-xs-4 fl cen">
				<img src="img/fdf_a.gif"  class="w100"/>
				<p  class="fz14 ">鲜花</p>
				
			</section>
			<section class="mui-col-xs-4 fl cen">
				<img src="img/fdf_b.gif"  class="w100"/>
				<p  class="fz14 ">服装</p>
				
			</section>
			<section class="mui-col-xs-4 fl cen">
				<img src="img/fdf_c.gif"  class="w100"/>
				<p  class="fz14 ">蛋糕</p>
				
			</section>
			<section class="mui-col-xs-4 fl cen">
				<img src="img/fdf_d.gif"  class="w100"/>
				<p  class="fz14 ">毛绒玩具</p>
				
			</section>
			<section class="mui-col-xs-4 fl cen">
				<img src="img/fdf_e.gif"  class="w100"/>
				<p  class="fz14 ">化妆品</p>
				
			</section>
			<section class="mui-col-xs-4 fl cen">
				<img src="img/fdf_f.gif"  class="w100"/>
				<p  class="fz14 ">巧克力</p>
				
			</section>
			<section class="mui-col-xs-4 fl cen">
				<img src="img/fdf_h.gif"  class="w100"/>
				<p  class="fz14 ">家居用品</p>
				
			</section>
			<section class="mui-col-xs-4 fl cen">
				<img src="img/fdf_g.gif"  class="w100"/>
				<p  class="fz14 ">皮具</p>
				
			</section>
			
			
		</section>
		
        
        <section class="mui-col-xs-9 bgff fl pd pt20 pl20 cen sdf_ouyy " id="ddf_oiu_a">
			<section class="mui-col-xs-4 fl">
				<img src="img/case_a.jpg"  class="w100"/>
				<p  class="fz14 ">饰品</p>
				
			</section>
                
        </section>
        
        
          <section class="mui-col-xs-9 bgff fl pd pt20 pl20 cen sdf_ouyy" id="ddf_oiu_c">
			<section class="mui-col-xs-4 fl">
				<img src="img/fdf_a.gif"  class="w100"/>
				<p  class="fz14 ">饰品</p>
				
			</section>
                
        </section>
        
        
           <section class="mui-col-xs-9 bgff fl pd pt20 pl20 cen sdf_ouyy" id="ddf_oiu_d">
			<section class="mui-col-xs-4 fl">
				<img src="img/fdf_b.gif"  class="w100"/>
				<p  class="fz14 ">饰品</p>
				
			</section>
                
        </section>
        
        
           <section class="mui-col-xs-9 bgff fl pd pt20 pl20 cen sdf_ouyy" id="ddf_oiu_e">
			<section class="mui-col-xs-4 fl">
				<img src="img/fdf_c.gif"  class="w100"/>
				<p  class="fz14 ">饰品</p>
				
			</section>
                
        </section>
        
        
           <section class="mui-col-xs-9 bgff fl pd pt20 pl20 cen sdf_ouyy" id="ddf_oiu_f">
			<section class="mui-col-xs-4 fl">
				<img src="img/fdf_d.gif"  class="w100"/>
				<p  class="fz14 ">饰品</p>
				
			</section>
                
        </section>
        
           <section class="mui-col-xs-9 bgff fl pd pt20 pl20 cen sdf_ouyy" id="ddf_oiu_g">
			<section class="mui-col-xs-4 fl">
				<img src="img/fdf_e.gif"  class="w100"/>
				<p  class="fz14 ">饰品</p>
				
			</section>
                
        </section>
        
           <section class="mui-col-xs-9 bgff fl pd pt20 pl20 cen sdf_ouyy" id="ddf_oiu_h">
			<section class="mui-col-xs-4 fl">
				<img src="img/fdf_f.gif"  class="w100"/>
				<p  class="fz14 ">饰品</p>
				
			</section>
                
        </section>
        
	</section>
	
	<nav class="mui-bar mui-bar-tab pt5">
	    <a class="mui-tab-item mui-active">
	        <span class="fa fa-home fz22"></span><br />
	        <span class="mui-tab-label fz12">首页</span>
	    </a>
	    <a class="mui-tab-item">
	        <span class="fa fa-th-large fz22"></span><br />
	        <span class="mui-tab-label fz12">分类</span>
	    </a>
	    <a class="mui-tab-item">
	        <span class="fa fa-shopping-cart fz22"></span><br>
	        <span class="mui-tab-label fz12">购物</span>
	    </a>
	    <a class="mui-tab-item">
	        <span class="fa fa-user fz22"></span><br>
	        <span class="mui-tab-label fz12">我的</span>
	    </a>
	</nav>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script>
      $(".dfs_s li").on("click",function(){
          var ddf=$(this).attr("data-id");
          $(".sdf_ouyy").removeClass("show_ssd");
          $("#"+ddf).addClass("show_ssd");
          $(".dfs_s li").removeClass("act_as")
          $(this).addClass("act_as")
    
          
      })
    </script>
</body>
</html>